<template>
    <el-dialog width="50%" v-model="dialogVisible" :title="dialogTitle" :before-close="handleClose" draggable overflow
        center>
        <el-table :data="UserList" height="400" border>
            <el-table-column prop="name" label="姓名" />
            <el-table-column prop="sex" label="性别">
                <!-- <template #default="scope">
                    <p v-if="scope.row.sex === '1'">男</p>
                    <p v-else>女</p>
                </template> -->
            </el-table-column>
            <el-table-column prop="age" label="年龄" />
            <el-table-column prop="telephone" label="手机号" />
            <el-table-column prop="qiandao" label="签到" />
        </el-table>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="canelDialog">取消</el-button>
                <el-button type="primary" @click="toDownload" :icon="Promotion"> 下载 </el-button>
            </span>
        </template>
    </el-dialog>
</template>

<script setup>
import $axios from '../../../utils/axios.js';
import { storeToRefs } from "pinia";
import { useMyactivityStore } from "../../../stores/myactivity.js";
const myactivityStore = useMyactivityStore()
const { UserList, dialogVisible, dialogTitle } = storeToRefs(myactivityStore)

const canelDialog = () => {
    myactivityStore.dialogVisible = false
    myactivityStore.UserList = []
}
const handleClose = () => {
    myactivityStore.dialogVisible = false
    myactivityStore.UserList = []
}

const toDownload = async () => {
    // console.log("toDownload");
    // myactivityStore.download()
    try {
        const path = '/download/excel/' + myactivityStore.aId;
        const response = await $axios.post(path, null, {
            responseType: 'blob', // 设置响应类型为blob，以便处理二进制数据  
        });
        console.log(response);

        // 检查响应状态，假设API返回的是常见的code和data结构  
        if (response.status === 200) {
            // 创建一个 Blob 对象来表示数据  
            let blob = new Blob([response.data], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' });

            // let downloadElement = document.createElement('a');
            // let href = window.URL.createObjectURL(blob); //创建下载的链接
            // downloadElement.href = href;
            // downloadElement.download = myactivityStore.dialogTitle + '.xlsx'; //下载后文件名
            // document.body.appendChild(downloadElement);
            // downloadElement.click(); //点击下载
            // document.body.removeChild(downloadElement); //下载完成移除元素
            // window.URL.revokeObjectURL(href); //释放掉blob对象

            // // 创建一个链接元素  
            // const url = window.URL.createObjectURL(blob);
            // const link = document.createElement('a');
            // link.href = url;

            // // 设置文件名  
            const filename = myactivityStore.dialogTitle + '.xlsx';
            // link.setAttribute('download', filename);

            // // 触发下载  
            // document.body.appendChild(link);
            // link.click();

            // // 清理  
            // window.URL.revokeObjectURL(url);
            // document.body.removeChild(link);

            // console.log("下载成功");
            // let blob = new Blob([response.data], { type: 'application/vnd.ms-excel;charset=utf-8' })
            let downloadElement = document.createElement('a');
            let href = window.URL.createObjectURL(blob); //创建下载的链接
            downloadElement.href = href;
            downloadElement.download = filename; //下载后文件名
            document.body.appendChild(downloadElement);
            downloadElement.click(); //点击下载
            document.body.removeChild(downloadElement); //下载完成移除元素
            window.URL.revokeObjectURL(href); //释放掉blob对象
        } else {
            // 处理错误  
            console.error("下载失败", response);
        }
    } catch (error) {
        // 捕获并处理任何异常  
        console.error("下载过程中发生错误：", error);
        // 如果你想在前端显示错误信息，可以使用UI库的方法（比如Vue中的this.$message.error）  
        // 但是由于你使用了async函数，这里的this可能不再是Vue实例，所以你需要确保正确引用this  
        // this.$message.error(error.message || error); // 假设你有一个全局的$message方法  
    }
}
</script>